@import "tailwindcss";

:root {
  --background: #010b2c;
  --foreground: #ffffff;
  --primary: #1890ff;
  --primary-dark: #0050b3;
  --secondary: #a0cfff;
  --card-bg: rgba(13, 28, 50, 0.7);
  --border-glow: rgba(24, 144, 255, 0.5);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #010b2c;
    --foreground: #ededed;
  }
}

body {
  background: linear-gradient(135deg, #010b2c 0%, #03254b 100%);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

.glass-effect {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.tech-border {
  position: relative;
}

.tech-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary), transparent, var(--primary));
  border-radius: inherit;
  z-index: -1;
  animation: border-glow 3s linear infinite;
}

@keyframes border-glow {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
